<template>
    <div class="amLayout">
        <tg-tags :isHiddenTag="true" :isHiddenBtn="true">
            <template #title>
                <span>TA的相簿</span>
            </template>
        </tg-tags>
        <tg-kinds :list="kinds" @changeData="changeKinds" :total="allKindsTotal"></tg-kinds>
        <div class="info" v-loading="loading" element-loading-text="Loading..." element-loading-background="white">
            <p v-for="item in info?.items" :key="item.doc_id">
                <album-item
                    :count="item.count"
                    :description="item.description"
                    :title="item.title"
                    :view="item.view"
                    :like="item.like"
                    :pic="item.pictures[0].img_src"
                ></album-item>
            </p>
        </div>
        <div class="pagination">
            <el-config-provider :locale="zhCn">
                <el-pagination  background 
                                layout="prev, pager, next, jumper" 
                                :current-page="pageVal.size"
                                :total="pageVal.total" 
                                :default-page-size="30" 
                                prev-text="上一页"
                                next-text="下一页"
                                @current-change="changePage"/>
            </el-config-provider>
        </div>
    </div> 
</template>

<script lang="ts" setup>
import { tgTags, tgKinds, albumItem } from '@/pages/up/components'
import { get } from '@/http/axios'
import { onBeforeMount, reactive, ref } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { changePagTotal, countTotal } from './index'
import { changeNowRoute, baseRouteGetStatus } from '@/router/changeUrl'
import { useRouter } from 'vue-router'

interface Props{
    mid:string
}
type kindType = {
    count:number
    name:string
    tid:string
    label:string
}
const props =defineProps<Props>()
let info = ref()
const router = useRouter()
let kinds = ref<Array<kindType>>([
    { count: 0,name: '日常', tid: 'daily',label: 'daily_count' },
    { count: 0,name: '画', tid: 'draw',label: 'draw_count' },
    { count: 0,name: '照片', tid: 'photo',label: 'photo_count' },
])
const pageVal = reactive({
    size:1,
    total:0,
})
let allKindsTotal = ref<number>(0)
let loading = ref<boolean>(true)
const map = new Map()
onBeforeMount(() => {
    baseRouteGetStatus(router,map)
    if (map.has('page_num')) pageVal.size = Number(map.get('page_num'))
    initData()
    initKindsData()
})
function initData() {
    loading.value = true
    info.value = []
    const obj = changeNowRoute(router,map)
    const { mid = props.mid, tid = 'all', page_num = 0 } = { ...obj }
    get('/x/dynamic/feed/draw/doc_list?uid=' + mid +'&page_num=' + (page_num? page_num - 1 : 0) + '&page_size=30&biz=' + tid)
    .then(res => {
        console.log('相簿',res);
        info.value = res.data
        loading.value = false
        pageVal.total = changePagTotal(kinds.value, tid, allKindsTotal.value)
    }).catch(err => [
        alert('相簿数据加载失败')
    ])
}
function initKindsData() {
    get('/x/dynamic/feed/draw/upload_count?uid=' + props.mid)
    .then(res => {
        //可能会有更优的算法 暂时暴力算法
        Object.keys(res.data).forEach(el => {
            kinds.value.forEach((ele, index) => {
                if (el === ele.label) {
                    ele.count = res.data[el]
                    if (!res.data[el]) {
                        kinds.value.splice(index, index)
                    }
                }
            })
        })
        console.log('算法过后', kinds.value);
        allKindsTotal.value = countTotal(kinds.value)
        pageVal.total = changePagTotal(kinds.value)
    }).catch(err => {
        alert('相簿分类加载失败')
    })
}
function changeKinds(tid: string) {
    pageVal.size = 1
    map.set('tid', tid)
    map.set('page_num', 1)
    initData()
}
function changePage(pn: number) {
    pageVal.size = pn
    map.set('page_num', pn)
    initData()
}
</script>

<style lang="scss" scoped>
@import url(../../assets/css/changePagintoin.scss);
.amLayout{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}
.info{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
    min-height: 175px;
    & p{
        width: calc(( 100% - 20px * 4 ) / 5);
        overflow: hidden;
        height: 175px;
    }
}
</style>